<template>
  <div>
    <template v-if="obj.type == 'Context'">
      <ContextForm v-model="obj" :setColorChange="setColorChange" :predefineColors="predefineColors" />
    </template>
    <template v-if="obj.type == 'SingleText'">
      <SingleTextForm v-model="obj" :setjustifyContent="setjustifyContent" :flexstyle="flexstyle"
        :setFontStyle="setFontStyle" :setColorChange="setColorChange" :predefineColors="predefineColors" />
    </template>
    <template v-if="obj.type == 'Time'">
      <TimeForm v-model="obj" :setjustifyContent="setjustifyContent" :flexstyle="flexstyle" :flexstyle2="flexstyle2"
        :setFontStyle="setFontStyle" :setColorChange="setColorChange" :predefineColors="predefineColors"
        :setAlignItems="setAlignItems" />
    </template>
    <template v-if="obj.type == 'Camera'">
      <CameraForm v-model="obj" :setColorChange="setColorChange" :predefineColors="predefineColors" />
    </template>
    <!-- 线条 -->
    <template v-if="obj.type == 'LineFigure'">
      <LineFigureForm v-model="obj" :setColorChange="setColorChange" :predefineColors="predefineColors" />
    </template>
    <!-- 嵌入 -->
    <template v-if="obj.type == 'Embed'">
      <EmbedForm v-model="obj" :boardListArr="boardListArr" :setColorChange="setColorChange"
        :predefineColors="predefineColors" />
    </template>
    <!-- 图形 -->
    <template v-if="obj.type == 'Figure'">
      <FigureForm v-model="obj" :setColorChange="setColorChange" :predefineColors="predefineColors" />
    </template>
    <template v-if="obj.type == 'VideoPlay'">
      <VideoPlayForm v-model="obj" @getVideoList="getVideoList" :deleteDataYinfo="deleteDataYinfo"
        :addDataYinfo="addDataYinfo" :videoListArr="videoListArr" :setColorChange="setColorChange"
        :predefineColors="predefineColors" />
    </template>
    <template v-if="obj.type == 'CardImg'">
      <CardImgForm v-model="obj" />
    </template>
    <template v-if="obj.type == 'DateSearch'">
      <DateSearchForm v-if="obj.type == 'DateSearch'" v-model="obj" :plugsDataArray="plugsDataArray"
        :setFontStyle="setFontStyle" :setColorChange="setColorChange" :predefineColors="predefineColors" />
    </template>
    <!-- pdf文件 -->
    <template v-if="obj.type == 'FileData'">
      <FileDataForm v-model="obj" @getFileList="getFileList" :fileDataList="fileDataList" :setColorChange="setColorChange"
        :predefineColors="predefineColors" />
    </template>
    <template v-if="obj.type == 'Submit'">
      <SubmitForm v-model="obj" :setFontStyle="setFontStyle" :mydataTableList="mydataTableList"
        :tableSelectChange="tableSelectChange" :setColorChange="setColorChange" :columnCheckboxArr="columnCheckboxArr"
        :predefineColors="predefineColors" />
    </template>
    <!-- 表格 -->
    <template v-if="obj.type == 'CardTable'">
      <CardTableForm v-model="obj" :dataTableList="dataTableList" :tableSelectChange="tableSelectChange"
        :setFontStyle="setFontStyle" :setColorChange="setColorChange" :deleteDataYinfo="deleteDataYinfo"
        :columnData="columnData" :predefineColors="predefineColors" :addDataYinfo="addDataYinfo"
        :reloadTimeChangeHandle="reloadTimeChangeHandle" />
    </template>
    <!-- 数据资源 -->
    <template v-if="obj.type == 'TableFile'">
      <TableFileForm v-model="obj" :dataTableList="dataTableList" :tableSelectChange="tableSelectChange"
        :setValueMaxInfo="setValueMaxInfo" :columnData="columnData" :predefineColors="predefineColors"
        :setFontStyle="setFontStyle" :reloadTimeChangeHandle="reloadTimeChangeHandle" />
    </template>
    <!-- end -->
    <template v-if="obj.type == 'Pie'">
      <PieForm v-model="obj" :dataTableList="dataTableList" :tableSelectChange="tableSelectChange"
        :setFontStyle="setFontStyle" :setColorChange="setColorChange" :deleteDataYinfo="deleteDataYinfo"
        :columnData="columnData" :predefineColors="predefineColors" :addDataYinfo="addDataYinfo"
        :reloadTimeChangeHandle="reloadTimeChangeHandle" />
    </template>
    <template v-if="obj.type == 'Bar'">
      <BarForm v-model="obj" :dataTableList="dataTableList" :tableSelectChange="tableSelectChange"
        :setFontStyle="setFontStyle" :setColorChange="setColorChange" :deleteDataYinfo="deleteDataYinfo"
        :columnData="columnData" :predefineColors="predefineColors" :addDataYinfo="addDataYinfo"
        :reloadTimeChangeHandle="reloadTimeChangeHandle" />
    </template>
    <template v-if="obj.type == 'Candlestick'">
      <CandlestickForm v-model="obj" :dataTableList="dataTableList" :setFontStyle="setFontStyle"
        :setColorChange="setColorChange" :columnData="columnData" :predefineColors="predefineColors"
        :tableSelectChange="candlestSelectChange" :reloadTimeChangeHandle="reloadTimeChangeHandle" />
    </template>
    <template v-if="obj.type == 'Gantetu'">
      <GantetuForm v-model="obj" :dataTableList="dataTableList" :setFontStyle="setFontStyle"
        :setColorChange="setColorChange" :columnData="columnData" :predefineColors="predefineColors"
        :tableSelectChange="tableSelectChange" :reloadTimeChangeHandle="reloadTimeChangeHandle"
        :deleteDataYinfo="deleteDataYinfo" />
    </template>
    <template v-if="obj.type == 'Radar'">
      <RadarForm v-model="obj" :dataTableList="dataTableList" :tableSelectChange="tableSelectChange"
        :setFontStyle="setFontStyle" :setColorChange="setColorChange" :deleteDataYinfo="deleteDataYinfo"
        :columnData="columnData" :predefineColors="predefineColors" :addDataYinfo="addDataYinfo"
        :reloadTimeChangeHandle="reloadTimeChangeHandle" />
    </template>
    <template v-if="obj.type == 'TabSwitch'">
      <TabSwitchForm v-if="obj.type == 'TabSwitch'" v-model="obj" :plugsDataArray="plugsDataArray"
        :setFontStyle="setFontStyle" :setColorChange="setColorChange" :predefineColors="predefineColors" />
    </template>
    <!-- 要素 -->
    <template v-if="obj.type == 'Element'">
      <ElementForm v-model="obj" :setColorChange="setColorChange" :predefineColors="predefineColors" ref="elementForm" />
    </template>
    <!-- 散点图 -->
    <template v-if="obj.type == 'Scatter'">
      <ScatterForm v-model="obj" :dataTableList="dataTableList" :tableSelectChange="tableSelectChange"
        :addDataYinfo="addDataYinfo" :setColorChange="setColorChange" :deleteDataYinfo="deleteDataYinfo"
        :columnData="columnData" :predefineColors="predefineColors" :setFontStyle="setFontStyle"
        :reloadTimeChangeHandle="reloadTimeChangeHandle" />
    </template>
    <NewmapForm v-if="obj.type == 'NewMap'" v-model="obj" :dataTableList="dataTableList"
      :tableSelectChange="tableSelectChange" :setFontStyle="setFontStyle" :columnData="columnData"
      :setColorChange="setColorChange" :predefineColors="predefineColors"
      :reloadTimeChangeHandle="reloadTimeChangeHandle" />
    <NewmapForm2 v-if="obj.type == 'NewMap2'" v-model="obj" :dataTableList="dataTableList"
      :tableSelectChange="tableSelectChange" :setFontStyle="setFontStyle" :columnData="columnData"
      :setColorChange="setColorChange" :predefineColors="predefineColors"
      :reloadTimeChangeHandle="reloadTimeChangeHandle" />
    <!-- 状态图 -->
    <template v-if="obj.type == 'Status'">
      <StatusForm v-model="obj" :setColorChange="setColorChange" :predefineColors="predefineColors"
        :setFontStyle="setFontStyle" :flexstyle="flexstyle" :flexstyle2="flexstyle2"
        :setjustifyContent="setjustifyContent" :setAlignItems="setAlignItems" :dataTableList="dataTableList"
        :tableSelectChange="tableSelectChange" :columnData="columnData" :addStatusStatusinfo="addStatusStatusinfo"
        :deleteDataYinfo="deleteDataYinfo" :figureArr="figureArr" :reloadTimeChangeHandle="reloadTimeChangeHandle" />
    </template>
    <template v-if="obj.type == 'Card'">
      <CardForm v-model="obj" :setColorChange="setColorChange" :predefineColors="predefineColors"
        :setFontStyle="setFontStyle" :flexstyle="flexstyle" :flexstyle2="flexstyle2"
        :setjustifyContent="setjustifyContent" :setAlignItems="setAlignItems" :dataTableList="dataTableList"
        :tableSelectChange="tableSelectChange" :columnData="columnData" :addStatusStatusinfo="addStatusStatusinfo"
        :deleteDataYinfo="deleteDataYinfo" :figureArr="figureArr" :reloadTimeChangeHandle="reloadTimeChangeHandle" />
    </template>
    <template v-if="obj.type == 'Rate'">
      <RateForm v-model="obj" :dataTableList="dataTableList" :tableSelectChange="tableSelectChange"
        :setFontStyle="setFontStyle" :setColorChange="setColorChange" :deleteDataYinfo="deleteDataYinfo"
        :columnData="columnData" :predefineColors="predefineColors" :reloadTimeChangeHandle="reloadTimeChangeHandle" />
    </template>
    <!-- 3d折线图 -->
    <template v-if="obj.type == 'Grid3D'">
      <Grid3DForm v-model="obj" :dataTableList="dataTableList" :tableSelectChange="tableSelectChange"
        :setFontStyle="setFontStyle" :setColorChange="setColorChange" :deleteDataYinfo="deleteDataYinfo"
        :columnData="columnData" :predefineColors="predefineColors" :setValueMaxInfo="setValueMaxInfo"
        :reloadTimeChangeHandle="reloadTimeChangeHandle" />
    </template>
    <!-- 水位图，进度条 -->
    <template v-if="obj.type == 'LiquidFill'">
      <LiquidFillForm v-model="obj" :dataTableList="dataTableList" :tableSelectChange="tableSelectChange"
        :setFontStyle="setFontStyle" :setColorChange="setColorChange" :deleteDataYinfo="deleteDataYinfo"
        :columnData="columnData" :predefineColors="predefineColors" :reloadTimeChangeHandle="reloadTimeChangeHandle" />
    </template>
    <template v-if="obj.type == 'Progress'">
      <ProgressForm v-model="obj" :dataTableList="dataTableList" :tableSelectChange="tableSelectChange"
        :setFontStyle="setFontStyle" :setColorChange="setColorChange" :deleteDataYinfo="deleteDataYinfo"
        :columnData="columnData" :predefineColors="predefineColors" :reloadTimeChangeHandle="reloadTimeChangeHandle" />
    </template>
    <template v-if="obj.type == 'LineBarMixin'">
      <LineBarMixinForm v-model="obj" :dataTableList="dataTableList" :tableSelectChange="tableSelectChange"
        :setFontStyle="setFontStyle" :setColorChange="setColorChange" :deleteDataYinfo="deleteDataYinfo"
        :columnData="columnData" :predefineColors="predefineColors" :setValueMaxInfo="setValueMaxInfo"
        :addDataYinfo="addDataYinfo" :reloadTimeChangeHandle="reloadTimeChangeHandle" />
    </template>
    <!-- 仪表盘 -->
    <template v-if="obj.type == 'Gauge'">
      <GaugeForm v-model="obj" :dataTableList="dataTableList" :tableSelectChange="tableSelectChange"
        :setFontStyle="setFontStyle" :setColorChange="setColorChange" :deleteDataYinfo="deleteDataYinfo"
        :columnData="columnData" :predefineColors="predefineColors" :reloadTimeChangeHandle="reloadTimeChangeHandle" />
    </template>
    <template v-if="obj.type == 'NewGauge'">
      <NewGaugeForm v-model="obj" :dataTableList="dataTableList" :tableSelectChange="tableSelectChange"
        :setFontStyle="setFontStyle" :setColorChange="setColorChange" :columnData="columnData"
        :predefineColors="predefineColors" :reloadTimeChangeHandle="reloadTimeChangeHandle" />
    </template>
    <!-- 时间进度 -->
    <TimeSpeedForm v-if="obj.type == 'TimeSpeed'" v-model="obj" :dataTableList="dataTableList"
      :tableSelectChange="tableSelectChange" :setFontStyle="setFontStyle" :deleteDataYinfo="deleteDataYinfo"
      :columnData="columnData" :setColorChange="setColorChange" :predefineColors="predefineColors" />
    <!-- 倒计时 -->
    <TimeOutForm v-if="obj.type == 'TimeOut'" v-model="obj" :setFontStyle="setFontStyle" :setColorChange="setColorChange"
      :predefineColors="predefineColors" />
    <!-- 状态组合 -->
    <template v-if="obj.type == 'StatusGroup'">
      <h3 class="pagetitle">
        {{ obj.name }}
      </h3>
      <div class="editgroup">
        <template v-if="obj.tableData.selectedIndex == -1">
          <el-row type="flex" class="editformitem" align="middle">
            <el-col :span="8" class="editlabel">
              <span>数据表格</span>
            </el-col>
            <el-col :span="16" class="editcontent">
              <el-select v-model="obj.tableData.tableId" placeholder="请选择数据" size="mini" @change="tableSelectChange">
                <el-option v-for="item in dataTableList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
          <el-row type="flex" class="editformitem" align="middle">
            <el-col :span="8" class="editlabel">
              <span>数据</span>
            </el-col>
            <el-col :span="16" class="editcontent dobuleinput">
              <span>行</span>
              <input v-model.number="obj.tableData.lines" type="number" max="30" />
              <span>列</span>
              <input v-model.number="obj.tableData.rows" type="number" max="20" />
            </el-col>
          </el-row>
          <el-row type="flex" class="editformitem">
            <el-col :span="8" class="editlabel">
              <span>间距</span>
            </el-col>
            <el-col :span="16" class="editcontent">
              <input v-model.number="obj.tableData.lineWidth" type="number" class="miniinput" />
            </el-col>
          </el-row>
          <el-row type="flex" class="editformitem">
            <el-col :span="2" class="editlabel">
            </el-col>
            <el-col :span="22" class="editcontent">
              <el-checkbox v-model="obj.tableData.isSerialize">按顺序排列</el-checkbox>
            </el-col>
          </el-row>
          <el-row type="flex" class="editformitem" v-if="obj.tableData.isSerialize">
            <el-col :span="8" class="editlabel">
              <span></span>
            </el-col>
            <el-col :span="16" class="editcontent dobuleinput">
              <input v-model.number="obj.tableData.startLine" type="number" placeholder="开始" />
              <span></span>
              <input v-model.number="obj.tableData.endLine" type="number" placeholder="结束" />
              <button class="tjbutton" @click="statusGroupSerialize">填充列</button>
            </el-col>
          </el-row>
          <!-- 批量替换设置参数 -->
          <el-row type="flex" class="editformitem">
            <el-col :span="2" class="editlabel"></el-col>
            <el-col :span="22" class="editcontent">
              <el-checkbox v-model="obj.tableData.isReplace">批量设置状态值</el-checkbox>
            </el-col>
          </el-row>
          <template v-if="obj.tableData.isReplace">
            <el-row type="flex" class="editformitem" align="middle">
              <el-col :span="8" class="editlabel">
                <span>小数点位</span>
              </el-col>
              <el-col :span="16" class="editcontent">
                <input v-model.number="obj.tableData.replaceData.decimal" type="number" class="miniinput" />
              </el-col>
            </el-row>
            <el-row type="flex" class="editformitem" align="middle">
              <el-col :span="8" class="editlabel">
                <span>数值后缀</span>
              </el-col>
              <el-col :span="16" class="editcontent">
                <input v-model="obj.tableData.replaceData.unit" type="text" style="width: 52px;" />
                <input v-model.number="obj.tableData.replaceData.unitSize" style="width: 40px;margin:0 10px;"
                  type="number" />
                <el-color-picker popper-class="mycolorview" v-model="obj.tableData.replaceData.unitColor" size="small"
                  show-alpha :predefine="predefineColors"
                  @active-change="setColorChange(obj.tableData.replaceData, 'unitColor', $event)">
                </el-color-picker>
                <div class="fontstylev">
                  <div :class="['fontitem', { 'active': obj.tableData.replaceData.unitFontWeight == 'bold' }]"
                    @click="setFontStyle('fontWeight', obj.tableData.replaceData, 'unitFontWeight')"><i
                      class="iconfont icon-zitijiacu"></i>
                  </div>
                  <div :class="['fontitem', { 'active': obj.tableData.replaceData.unitFontStyle == 'italic' }]"
                    @click="setFontStyle('fontStyle', obj.tableData.replaceData, 'unitFontStyle')"><i
                      class="iconfont icon-zitixieti"></i>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row type="flex" class="editformitem" align="middle">
              <el-col :span="8" class="editlabel">
                <span>显示数值</span>
              </el-col>
              <el-col :span="16" class="editcontent">
                <el-checkbox v-model="obj.tableData.replaceData.isShowValue"></el-checkbox>
                <span style="margin:0 15px 0 0;">显示状态值</span>
                <el-checkbox v-model="obj.tableData.replaceData.isShowText"></el-checkbox>
              </el-col>
            </el-row>
            <div class="statitems" v-for="(item, index) in obj.tableData.replaceData.statusList" :key="'status' + index">
              <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                  <span>状态{{ index + 1 }}</span>
                </el-col>
                <el-col :span="16" class="editcontent sldyinput">
                  <input type="number" v-model="item.value" style="width: 52px;" />
                  <span style="margin-right:8px;">&nbsp;及以上</span>
                  <el-color-picker popper-class="mycolorview" v-model="item.backgroundColor" size="small" show-alpha
                    :predefine="predefineColors"
                    @active-change="setColorChange(obj.tableData.replaceData.statusList[index], 'backgroundColor', $event)" />
                </el-col>
              </el-row>
              <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                  <span>数值字体</span>
                </el-col>
                <el-col :span="16" class="editcontent sldyinput">
                  <input v-model.number="item.valSize" style="width: 104px;margin-right:8px;" type="number" />
                  <el-color-picker popper-class="mycolorview" v-model="item.valColor" size="small" show-alpha
                    :predefine="predefineColors"
                    @active-change="setColorChange(obj.tableData.replaceData.statusList[index], 'valColor', $event)">
                  </el-color-picker>
                  <div class="fontstylev">
                    <div :class="['fontitem', { 'active': item.valFontWeight == 'bold' }]"
                      @click="setFontStyle('fontWeight', item, 'valFontWeight')"><i class="iconfont icon-zitijiacu"></i>
                    </div>
                    <div :class="['fontitem', { 'active': item.valFontStyle == 'italic' }]"
                      @click="setFontStyle('fontStyle', item, 'valFontStyle')"><i class="iconfont icon-zitixieti"></i>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                  <span>状态值</span>
                </el-col>
                <el-col :span="16" class="editcontent sldyinput">
                  <input v-model="item.text" style="width:52px;" />
                  <input v-model.number="item.textSize" style="width: 40px;margin:0 10px;" type="number" />
                  <el-color-picker popper-class="mycolorview" v-model="item.textColor" size="small" show-alpha
                    :predefine="predefineColors"
                    @active-change="setColorChange(obj.tableData.replaceData.statusList[index], 'textColor', $event)">
                  </el-color-picker>
                  <div class="fontstylev">
                    <div :class="['fontitem', { 'active': item.textFontWeight == 'bold' }]"
                      @click="setFontStyle('fontWeight', item, 'textFontWeight')"><i class="iconfont icon-zitijiacu"></i>
                    </div>
                    <div :class="['fontitem', { 'active': item.textFontStyle == 'italic' }]"
                      @click="setFontStyle('fontStyle', item, 'textFontStyle')"><i class="iconfont icon-zitixieti"></i>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                  <span>背景</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                  <el-color-picker popper-class="mycolorview" v-model="item.backgroundColor" size="small" show-alpha
                    :predefine="predefineColors"
                    @active-change="setColorChange(obj.tableData.statusList[index], 'backgroundColor', $event)" />
                  <select v-model="item.bgType" style="width: 170px;margin-left:10px;">
                    <option :value="0">图片</option>
                    <option :value="1">图形</option>
                  </select>
                </el-col>
              </el-row>
              <el-row type="flex" class="editformitem" v-if="item.bgType == 0">
                <el-col :span="8" class="editlabel">
                  <span>背景图片</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                  <img-store v-model="item.backgroundImage">
                    <el-button size="mini" slot="button">请选择背景图片</el-button>
                  </img-store>
                  <!-- <el-tooltip class="uploadview" effect="dark" content="上传素材" placement="top-start">
                              <el-upload :action="uploadUrl" :on-success="uploadHandleChange"
                                :data="{ CustomerId: $store.getters.firmId }" :show-file-list="false" accept=".jpg, .png, .gif">
                                <div class="uploadBtn">
                                  <i class="el-icon-upload"></i>
                                </div>
                              </el-upload>
                            </el-tooltip>
                            <select style="width: 154px" v-model="item.backgroundImage">
                              <option value>请选择背景图片</option>
                              <option v-for="item in backgroundImgArr" :value="item.url" :key="item.name">
                                {{ item.name }}
                              </option>
                            </select> -->
                </el-col>
              </el-row>
              <template v-if="item.bgType == 1">
                <el-row type="flex" class="editformitem">
                  <el-col :span="8" class="editlabel">
                    <span>选择图形</span>
                  </el-col>
                  <el-col :span="16" class="editcontent">
                    <el-select v-model="item.iconGroup" style="width:212px" filterable placeholder="请选择" size="mini">
                      <el-option v-for="item in figureArr" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                  </el-col>
                </el-row>
                <el-row type="flex" class="editformitem">
                  <el-col :span="8" class="editlabel">
                    <span>图形颜色</span>
                  </el-col>
                  <el-col :span="16" class="editcontent">
                    <el-color-picker v-model="item.iconColor" size="small" show-alpha :predefine="predefineColors"
                      popper-class="mycolorview" @active-change="setColorChange(item, 'iconColor', $event)" />
                    <el-checkbox v-model="item.isNull" style="padding-left:15px;">是否镂空</el-checkbox>
                  </el-col>
                </el-row>
              </template>
              <span v-if="index > 0" class="statusdel"
                @click="deleteDataYinfo(obj.tableData.replaceData.statusList, index)">×</span>
            </div>
            <div class="addybtn" @click="addStatusStatusinfo(obj.tableData.replaceData.statusList)"
              style="margin-right:0px;">
              + 添加状态
            </div>
            <hr class="kbline" />
            <el-row type="flex" class="editformitem">
              <el-col :span="8" class="editlabel">
                <span>标题</span>
              </el-col>
              <el-col :span="16" class="editcontent">
                <input v-model="obj.tableData.replaceData.title" type="text" />
              </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
              <el-col :span="8" class="editlabel">
                <span>标题字体</span>
              </el-col>
              <el-col :span="16" class="editcontent">
                <input v-model.number="obj.tableData.replaceData.style.fontSize" class="miniinput" type="number" />
                <el-color-picker v-model="obj.tableData.replaceData.style.color" size="small" show-alpha
                  :predefine="predefineColors" popper-class="mycolorview"
                  @active-change="setColorChange(obj.tableData.replaceData.style, 'color', $event)" />
                <div class="fontstylev">
                  <div :class="['fontitem', { 'active': obj.tableData.replaceData.style.fontWeight == 'bold' }]"
                    @click="setFontStyle('fontWeight', obj.tableData.replaceData.style, 'fontWeight')"><i
                      class="iconfont icon-zitijiacu"></i>
                  </div>
                  <div :class="['fontitem', { 'active': obj.tableData.replaceData.style.fontStyle == 'italic' }]"
                    @click="setFontStyle('fontStyle', obj.tableData.replaceData.style, 'fontStyle')"><i
                      class="iconfont icon-zitixieti"></i>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
              <el-col :span="8" class="editlabel">
                <span>排列</span>
              </el-col>
              <el-col :span="16" class="editcontent plinfo">
                <el-radio v-model="obj.tableData.replaceData.showType" :label="1" style="margin-right:12px;">同行
                </el-radio>
                <el-radio v-model="obj.tableData.replaceData.showType" :label="2" style="margin-right:12px;">标题在上
                </el-radio>
                <el-radio v-model="obj.tableData.replaceData.showType" :label="3" style="margin-right:0px;">数字在上
                </el-radio>
              </el-col>
            </el-row>
            <el-row type="flex" class="editformitem" align="middle">
              <el-col :span="8" class="editlabel">
                <span>对齐</span>
              </el-col>
              <el-col :span="16" class="editcontent">
                <div class="flex">
                  <div :class="flexstyle('flex-start', obj.tableData.replaceData.style)"
                    @click="setjustifyContent('flex-start', obj.tableData.replaceData.style)">
                    <i class="iconfont icon-zuoduiqi"></i>
                  </div>
                  <div :class="flexstyle('center', obj.tableData.replaceData.style)"
                    @click="setjustifyContent('center', obj.tableData.replaceData.style)">
                    <i class="iconfont icon-shuipingjuzhongduiqi"></i>
                  </div>
                  <div :class="flexstyle('flex-end', obj.tableData.replaceData.style)"
                    @click="setjustifyContent('flex-end', obj.tableData.replaceData.style)">
                    <i class="iconfont icon-youduiqi"></i>
                  </div>
                  <div :class="flexstyle2('flex-start', obj.tableData.replaceData.style)"
                    @click="setAlignItems('flex-start', obj.tableData.replaceData.style)">
                    <i class="iconfont icon-jushangduiqi"></i>
                  </div>
                  <div :class="flexstyle2('center', obj.tableData.replaceData.style)"
                    @click="setAlignItems('center', obj.tableData.replaceData.style)">
                    <i class="iconfont icon-chuizhijuzhongduiqi"></i>
                  </div>
                  <div :class="flexstyle2('flex-end', obj.tableData.replaceData.style)"
                    @click="setAlignItems('flex-end', obj.tableData.replaceData.style)">
                    <i class="iconfont icon-juxiaduiqi"></i>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
              <el-col :span="8" class="editlabel">
                <span>背景</span>
              </el-col>
              <el-col :span="16" class="editcontent">
                <el-color-picker class="inputsize" v-model="obj.tableData.replaceData.style.backgroundColor" size="small"
                  show-alpha :predefine="predefineColors" popper-class="mycolorview"
                  @active-change="setColorChange(obj.tableData.replaceData.style, 'backgroundColor', $event)" />
                <img-store v-model="obj.tableData.replaceData.style.backgroundImage" style="display:inline-block;">
                  <el-button size="mini" slot="button">请选择背景图片</el-button>
                </img-store>
                <!-- <el-tooltip class="uploadview" effect="dark" content="上传素材" placement="top-start">
                            <el-upload :action="uploadUrl" :on-success="uploadHandleChange"
                              :data="{ CustomerId: $store.getters.firmId }" :show-file-list="false" accept=".jpg, .png, .gif">
                              <div class="uploadBtn">
                                <i class="el-icon-upload"></i>
                              </div>
                            </el-upload>
                          </el-tooltip>
                          <select style="width: 154px" v-model="obj.tableData.replaceData.style.backgroundImage">
                            <option value>请选择背景图片</option>
                            <option v-for="item in backgroundImgArr" :value="item.url" :key="item.name">
                              {{ item.name }}
                            </option>
                          </select> -->
              </el-col>
            </el-row>
            <el-row type="flex" class="editformitem" align="middle">
              <el-col :span="8" class="editlabel">
                <span>边框</span>
              </el-col>
              <el-col :span="16" class="editcontent">
                <input v-model="obj.tableData.replaceData.style.borderWidth" type="number" class="miniinput" />
                <el-color-picker v-model="obj.tableData.replaceData.style.borderColor" size="small" show-alpha
                  :predefine="predefineColors" popper-class="mycolorview"
                  @active-change="setColorChange(obj.tableData.replaceData.style, 'borderColor', $event)" />
              </el-col>
            </el-row>
            <el-row type="flex" class="editformitem" align="middle">
              <el-col :span="8" class="editlabel">
                <span>圆角</span>
              </el-col>
              <el-col :span="16" class="editcontent">
                <input v-model="obj.tableData.replaceData.style.borderRadius" type="number"
                  class="miniinput" /><span>px</span>
              </el-col>
            </el-row>
            <div style="margin:15px;">
              <el-button type="primary" size="mini" plain style="width:100%;" @click="replaceStatusItem">开始批量设置
              </el-button>
            </div>
          </template>
          <el-row type="flex" class="editformitem" align="middle">
            <el-col :span="8" class="editlabel">
              <span>刷新频率</span>
            </el-col>
            <el-col :span="16" class="editcontent">
              <input type="number" v-model.number="obj.tableData.reloadTime" class="miniinput"
                @change="reloadTimeChangeHandle" />
              <span>秒</span>
            </el-col>
          </el-row>
        </template>
        <template v-else>
          <StatusItemForm :columnData="columnData" :obj="obj.tableData.group[obj.tableData.selectedIndex]"
            :predefineColors="predefineColors" :boardListArr="boardListArr" @reloadData="reloadStatusGroupData"
            :figureArr="figureArr" />
        </template>
      </div>
    </template>
  </div>
</template>

<script>
// import { query, create } from "@/api/resource";
// import { query as tableList, GetStatisticsList, GetWriteColumnList } from "@/api/dataTable";
// import { getlist as getTableAttr } from "@/api/tableStructure";
// import { allList } from "@/api/board";
import { mapGetters } from 'vuex'

export default {
  name: "FormModel",
  props: {
    obj: Object,
    isTab: Number,
    // predefineColors: Array,
    reloadRunCardData: Function,
    // 所有组件集合
    plugsDataArray: Array,
  },
  components: {
    ImgStore: () => import("@/components/ImgStore"),
    TableFileForm: () => import("./form/TableFileForm.vue"),
    StatusItemForm: () => import("./form/StatusItemForm.vue"),
    GaugeForm: () => import("./form/GaugeForm.vue"),
    NewGaugeForm: () => import("./form/NewGaugeForm.vue"),
    TimeOutForm: () => import("./form/TimeOutForm.vue"),
    TimeSpeedForm: () => import("./form/TimeSpeedForm.vue"),
    EchartMapForm: () => import("./form/EchartMapForm.vue"),
    NewmapForm: () => import("./form/NewmapForm.vue"),
    CardForm: () => import("./form/CardForm.vue"),
    ScatterForm: () => import("./form/ScatterForm.vue"),
    LineFigureForm: () => import("./form/LineFigureForm.vue"),
    FigureForm: () => import("./form/FigureForm.vue"),
    LineBarMixinForm: () => import("./form/LineBarMixinForm.vue"),
    StatusForm: () => import("./form/StatusForm.vue"),
    NewmapForm2: () => import("./form/NewmapForm2.vue"),
    RateForm: () => import("./form/RateForm.vue"),
    TabSwitchForm: () => import("./form/TabSwitchForm.vue"),
    DateSearchForm: () => import("./form/DateSearchForm.vue"),
    ElementForm: () => import("./form/ElementForm.vue"),
    Grid3DForm: () => import("./form/Grid3DForm.vue"),
    PieForm: () => import("./form/PieForm.vue"),
    BarForm: () => import("./form/BarForm.vue"),
    SingleTextForm: () => import("./form/SingleTextForm.vue"),
    ContextForm: () => import("./form/ContextForm.vue"),
    CardImgForm: () => import("./form/CardImgForm.vue"),
    CardTableForm: () => import("./form/CardTableForm.vue"),
    TimeForm: () => import("./form/TimeForm.vue"),
    RadarForm: () => import("./form/RadarForm.vue"),
    CameraForm: () => import("./form/CameraForm.vue"),
    EmbedForm: () => import("./form/EmbedForm.vue"),
    CandlestickForm: () => import("./form/CandlestickForm.vue"),
    GantetuForm: () => import("./form/GantetuForm.vue"),
    VideoPlayForm: () => import("./form/VideoPlayForm.vue"),
    FileDataForm: () => import("./form/FileDataForm.vue"),
    SubmitForm: () => import("./form/SubmitForm.vue"),
    LiquidFillForm: () => import("./form/LiquidFillForm.vue"),
    ProgressForm: () => import("./form/ProgressForm.vue"),
  },
  computed: {
    ...mapGetters(['predefineColors'])
  },
  model: {
    prop: "obj",
    event: "change",
  },
  watch: {
    isTab: {
      // deep: true, // 深度监听
      handler(newVal, oldVal) {
        this.init();
      },
    },
  },
  mounted() {
    // this.getImgList();
    this.getBoardList();
    this.getVideoList();
    this.getTableList();
  },
  created() { },
  data() {
    return {
      showColor: false,
      // backgroundImgArr: [],
      // imgArr: [],
      dataTableList: [],
      columnData: [],
      videoListArr: [],
      boardListArr: [],
      // 提交看板复选框
      columnCheckboxArr: [],
      // checkedCities: [],
      columnCheckboxIds: [],
      // checkAll: false,
      // isIndeterminate: true
      // 自创表格列表
      mydataTableList: [],
      fileDataList: [],
      figureArr: [
        { id: 1, name: "正方形" },
        { id: 2, name: "圆形" },
        { id: 3, name: "三角形" },
        { id: 4, name: "五角星" },
        { id: 5, name: "菱形" },
        { id: 6, name: "梯形" },
        { id: 7, name: "五边形" },
        { id: 8, name: "六边形" },
      ]
    };
  },
  methods: {
    // 参数更改进行不同的初始化
    init() {
      if (!this.obj.style.boxShadow) {
        this.obj.style.boxShadow = {
          h: 0,
          v: 0,
          blur: 0,
          spreed: 0,
          color: "",
        };
      }
      if (this.obj.type == "Submit") {

        this.columnCheckboxArr = [];
        this.columnCheckboxIds = [];

        GetStatisticsList({
          pageInfo: {
            pageSize: 999,
            page: 1,
            totalCount: 0,
          },
          orderBy: "createTime",
          orderAsc: false,
        }).then((res) => {
          this.mydataTableList = res.data.data.data;
        });

        if (this.obj.tableData && this.obj.tableData.tableId) {
          GetWriteColumnList({ id: this.obj.tableData.tableId }).then((res) => {
            var mycolumnData = res.data.data.data;

            this.columnCheckboxArr = mycolumnData.map((e) => {
              return { name: e.name, title: e.title, id: e.id };
            });
            this.columnCheckboxIds = mycolumnData.map((e) => {
              return e.id;
            });
          });
        }
      } else if (this.obj.type == "FileData") {
        this.getFileList();
      } else if (this.obj.type == "Element") {
        this.$nextTick(() => {
          this.$refs['elementForm'].getElemetNodeList();
        })
      } else {
        if (this.obj.tableData && this.obj.tableData.tableId) {
          // this.tableSelectChange(this.obj.tableData.tableId);

          getTableAttr({ id: this.obj.tableData.tableId }).then((res) => {
            this.columnData = res.data.data;
          });
        } else {
          if (this.obj.type == "StatusGroup") {
            // 清空表单
            this.columnData = [];
          }
        }
      }
    },

    // #region 事件

    // 状态组合填充列
    statusGroupSerialize() {
      if (!this.obj.tableData.tableId) {
        this.$message.error("请先选择表格");
        return false;
      }
      var columnlength = this.columnData.length;
      if (this.obj.tableData.startLine <= 0) {
        this.$message.error(`起始列必须大于0`);
        return false;
      }
      if (this.obj.tableData.startLine >= this.obj.tableData.endLine) {
        this.$message.error(`结束列必须大于起始列`);
        return false;
      }
      if (this.obj.tableData.startLine > columnlength) {
        this.$message.error(`起始列不能大于表格列长度，当前表格列长度为 ${columnlength}`);
        return false;
      }
      if (this.obj.tableData.endLine > columnlength) {
        this.$message.error(`结束列不能大于表格列长度，当前表格列长度为 ${columnlength}`);
        return false;
      }

      var group = [];
      this.obj.tableData.group.forEach((e, i) => {
        var isPush = false;
        var index = 0;
        for (var j = this.obj.tableData.startLine - 1; j < this.obj.tableData.endLine; j++) {
          if (i == index) {
            var val = this.columnData[j];
            e.lineId = val.id;
            group.push(e);
            isPush = true;
            break;
          }
          index++;
        }
        if (!isPush) {
          group.push(e);
        }
      })
      this.obj.tableData.group = group;
      this.obj.tableData.count += 1;
      this.$emit("change", this.obj);
      this.$message.success("批量填充成功");
    },
    // 刷新状态组合api
    reloadStatusGroupData() {
      this.obj.tableData.count += 1;
      this.$emit("change", this.obj);
    },
    setColorChange(item, attr, val) {
      item[attr] = val;
      this.$emit("change", this.obj);
    },
    // 设置刷新时间判断最大值
    reloadTimeChangeHandle() {
      if (this.obj.tableData.type == 1) {
        if (this.obj.tableData.reloadTime < 60) {
          this.obj.tableData.reloadTime = 60;
          this.$message("统计表刷新频率最低60秒");
          return false;
        }
      }

      if (this.obj.tableData.reloadTime < 1) {
        this.obj.tableData.reloadTime = 1;
      }
    },
    // #endregion 事件

    // #region 组件公用函数
    // 字体样式
    setFontStyle(style, item, attr) {
      if (style == "fontWeight") {
        if (item[attr] == "bold") {
          item[attr] = '';
        } else {
          item[attr] = "bold";
        }
        this.$emit("change", this.obj);
      } else if (style == "fontStyle") {
        if (item[attr] == "italic") {
          item[attr] = '';
        } else {
          item[attr] = "italic";
        }
        this.$emit("change", this.obj);
      }
    },

    flexstyle(style, item) {
      if (item) {
        if (item['justifyContent'] == style) {
          return ["flexstyle", "active"];
        } else {
          return ["flexstyle"];
        }
      }
      if (this.obj.style.justifyContent == style) {
        return ["flexstyle", "active"];
      } else {
        return ["flexstyle"];
      }
    },
    flexstyle2(style, item) {
      if (item) {
        if (item['alignItems'] == style) {
          return ["flexstyle", "active"];
        } else {
          return ["flexstyle"];
        }
      }
      if (this.obj.style.alignItems == style) {
        return ["flexstyle", "active"];
      } else {
        return ["flexstyle"];
      }
    },
    setjustifyContent(style, item) {
      if (item) {
        item['justifyContent'] = style;
      } else {
        this.obj.style.justifyContent = style;
      }
      this.$emit("change", this.obj);
    },
    setAlignItems(style, item) {
      if (item) {
        item['alignItems'] = style;
      } else {
        this.obj.style.alignItems = style;
      }
      this.$emit("change", this.obj);
    },

    // 新增y轴数据
    addDataYinfo(item, len = 10) {
      if (item.length >= 10) {
        this.$message.error("已达到可设置最大数据列");
        return false;
      }

      item.push({
        id: "",
        color: this.predefineColors[item.length],
        // type: 1,
        // isSmooth: false,
        // isAreaColor: false,
        // areaColor: "",
        // 别名
        isAlise: false,
        alise: "",
      });
    },

    addStatusStatusinfo(item) {
      var info = item[item.length - 1];
      var data = {
        value: info.value,
        color: info.color,
        backgroundColor: info.backgroundColor,
        backgroundImage: "",
        valSize: info.valSize,
        valColor: info.valColor,
        valFontWeight: info.valFontWeight,
        valFontStyle: info.valFontStyle,
        text: info.text,
        textSize: info.textSize,
        textColor: info.textColor,
        textFontWeight: info.textFontWeight,
        textFontStyle: info.textFontStyle,
        isTwinkle: false,
        bgType: 0, // 0-图片，1-图标
        iconGroup: "",
        iconColor: info.iconColor,
        isNull: false, // 是否镂空
        twinkleType: 0, // 闪烁类型 0-背景、1-图形
        // 线条相关
        rotate: 0,
        shuxiang: false,
        weight: 1,
        textShadow: {
          h: 0,
          v: 0,
          blur: 0,
          color: "",
        },
      };
      item.push(data);
    },
    // 删除y轴数据
    deleteDataYinfo(item, index) {
      item.splice(index, 1);
    },
    // 状态组合批量设置子属性
    replaceStatusItem() {
      if (this.obj.tableData.group && this.obj.tableData.group.length && this.obj.tableData.replaceData) {
        var group = [];
        this.obj.tableData.group.forEach((e, i) => {
          this.obj.tableData.replaceData.lineId = e.lineId;
          var data = JSON.parse(JSON.stringify(this.obj.tableData.replaceData));
          group.push(data);
        })
        this.$set(this.obj.tableData, 'group', group);
        this.$message.success("批量设置成功");
        this.obj.tableData.count += 1;
        this.$emit("change", this.obj);
      } else {
        this.$message.error("设置失败，参数不完整");
      }
    },
    // #endregion

    // #region 资源获取api
    getVideoList() {
      query({
        pageInfo: {
          pageSize: 999,
          page: 1,
          totalCount: 0,
        },
        orderBy: "createTime",
        orderAsc: false,
        name: "",
        typeInc: [1],
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.videoListArr = response.data.data.data;
          }
        })
        .catch(() => { });
    },
    getBoardList() {
      allList({
        pageInfo: {
          pageSize: 999,
          page: 1,
          totalCount: 0,
        },
        orderBy: "createTime",
        orderAsc: false,
        name: "",
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.boardListArr = response.data.data.data;
          }
        })
        .catch(() => { });
    },
    getFileList() {
      var filterForm = {
        pageInfo: {
          pageSize: 99,
          page: 1,
          totalCount: 0
        },
        orderBy: "createTime",
        orderAsc: false,
        name: "",
        typeInc: [2]
      };
      query(filterForm)
        .then((response) => {
          if (response.data.code == 0) {
            this.fileDataList = response.data.data.data;
          }
        })
        .catch(() => {
        });
    },
    // 数据表列表
    getTableList() {
      tableList({
        pageInfo: {
          pageSize: 999,
          page: 1,
          totalCount: 0,
        },
        orderBy: "createTime",
        orderAsc: false,
        name: undefined,
        type: -1,
        typeInc: [],
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.dataTableList = response.data.data.data;
          }
        })
        .catch(() => { });
    },
    candlestSelectChange(e, index) {
      if (e) {
        getTableAttr({ id: e }).then((res) => {
          this.columnData = res.data.data;
        });

        var list = this.dataTableList.filter((item) => {
          return item.id == e;
        });

        // 重新选择表
        if (list.length) {
          const obj = list[0];
          this.obj.tableData.type = obj.type;
          this.obj.tableData.xId = "";
          this.obj.tableData.barList = [
            {
              id: "",
              name: "开盘"
            },
            {
              id: "",
              name: "收盘"
            },
            {
              id: "",
              name: "最高"
            },
            {
              id: "",
              name: "最低"
            }
          ];

          this.$emit("change", this.obj);
        }
      } else {
        this.columnData = [];
        this.obj.tableData.xId = "";
        this.obj.tableData.barList = [
          {
            id: "",
            name: "开盘"
          },
          {
            id: "",
            name: "收盘"
          },
          {
            id: "",
            name: "最高"
          },
          {
            id: "",
            name: "最低"
          }
        ];
      }
    },
    tableSelectChange(e, index) {
      if (e) {
        getTableAttr({ id: e }).then((res) => {
          this.columnData = res.data.data;
        });

        var list = this.dataTableList.filter((item) => {
          return item.id == e;
        });

        // 重新选择表
        if (list.length) {
          const obj = list[0];
          this.obj.tableData.type = obj.type;

          // 重置下拉列表参数
          switch (this.obj.type) {
            case "TableFile":
              this.obj.tableData.colId = "";
              break;
            case "Status":
              this.obj.tableData.lineId = "";
              break;
            case "Pie":
              this.obj.tableData.yList = [];
              break;
            // case "CardLine":
            //   this.obj.tableData.xId = "";
            //   this.obj.tableData.yList = [];
            //   break;
            // case "LineBar":
            //   this.obj.tableData.xId = "";
            //   this.obj.tableData.yId = "";
            //   this.obj.tableData.barList = [];
            //   break;
            case "Gantetu":
              this.obj.tableData.xId = "";
              this.obj.tableData.barList = [
                {
                  beginTimeId: "",
                  endTimeId: "",
                  name: ""
                },
              ];
              break;
            case "Scatter":
              this.obj.tableData.xId = "";
              this.obj.tableData.yList = [];
              break;
            case "LineBarMixin":
              this.obj.tableData.xId = "";
              this.obj.tableData.barList = [
                { id: "", type: 1, color: this.predefineColors[0] }
              ];
              break;
            case "Rate":
              this.obj.tableData.itemId = "";
              break;
            case "CardTable":
              this.obj.tableData.yList = [];
              break;
            case "Card":
              this.obj.tableData.lineId = "";
              break;
            case "Signal":
              this.obj.tableData.lineId = "";
              break;
            case "Semaphore":
              this.obj.tableData.lineId = "";
              break;
            case "StatusGroup":
              this.obj.tableData.group = [];
              break;
            case "Gauge":
              this.obj.tableData.itemId = "";
              break;
            case "NewGauge":
              this.obj.tableData.itemId = "";
              break;
            case "TimeSpeed":
              this.obj.tableData.dateId = "";
              this.obj.tableData.valueId = "";
              break;
            default:
              break;
          }

          this.$emit("change", this.obj);
        }

        // 组件表格变化更新本地缓存数据
        this.reloadRunCardData();
      } else {
        this.columnData = [];
      }
    },

    // #endregion

    // 输入表单change
    setValueMaxInfo(maxValue, item, param) {
      if (item[param] > maxValue) {
        item[param] = maxValue;
      }
    },
    // 超过最小值验证
    setNumberMinCheck(minValue, item, param) {
      if (item[param] < minValue) {
        item[param] = minValue;
      }
    },
  },
};
</script>

<style>
.groopitem {
  display: block;
}
</style>